 <template>
  <div>
    <div class="finance-support-box" style="background: #ffffff">
      <Header />
      <div class="nav-outer">
        <div class="nav-1200 area1190">
          <span>首页</span> > <span>菜单列表</span>  >内容列表
          <!--<div class="nav-right">-->
          <!--<span>售后政策</span>-->
          <!--<i class="center-line"></i>-->
          <!--<span>咨询客服</span>-->
          <!--</div>-->
        </div>
      </div>
      <div class="ques-box">
          <div class="notice" v-show="diago" >
              <div @click="back()" style="position: absolute;left: 0; top:-44px;line-height: 44px;cursor: pointer"> <i class="el-icon-arrow-left
        ">返回上一页</i></div>
              <div  v-for="(li, listIndex) in list" :key="listIndex">
                {{listIndex+1}}<span  @click="details(li.menuCategoryId,false)" style="cursor: pointer">. {{li.menuCategoryName}} >></span>
                <el-divider></el-divider>
              </div>
            </div>
            <div class="abs-right" v-if="menuDetail.type == 1">
              <!-- <div ><p style="font-size: 20px;font-weight: bold;color: black;margin-top:40px">内容列表</p></div> -->
              <p v-html="menuDetail.description"></p>
            </div>
      </div>

      <div class="ques-box">
          <div class="notice" v-show="diago2" >
              <div @click="back()" style="position: absolute;left: 0; top:-44px;line-height: 44px;cursor: pointer"> <i class="el-icon-arrow-left
        ">返回上一页</i></div>
              <div  v-for="(li, index) in menuList" :key="index">
                {{index+1}}<span  @click="details(li.id,false)" style="cursor: pointer">{{li.name}} >></span>
                <el-divider></el-divider>
              </div>
            </div>
            <div class="abs-right" v-if="menuDetail.type == 1" >
              <div ><p style="font-size: 20px;font-weight: bold;color: black;margin-top:40px;">内容列表</p></div>
              <p v-html="menuDetail.description"></p>
            </div>
      </div>
    </div>

  </div>

</template>

<script>
import Header from "@/components/Header.vue";
import empty from "../utils/common";
// import Footer from "@/components/Footer.vue";
export default {
  name: "FinnanceSupport",
  components: {
    Header,

  },
  data() {
    return {
      userName: "",
      userTel: "",
      userNeed: "",
      detailId:'',
      detail:{},
      list:{
        createTime:"",
        link:"",
        litpic:"",
        menuCategoryId:"",
        menuCategoryName:"",
        type:"",
        updateTime:"",
      },
      menuList:{},
      diago:false,
      diago2:false,
      menuDetail: {},
    };

  },
  created(){
     var that = this;
     let paras = JSON.parse(this.$route.query.para !=null ? this.$route.query.para : null);
     console.log("paras:"+paras);
     let cateList = JSON.parse(this.$route.query.categoryList!=null ? this.$route.query.categoryList : null);
     console.log("cateList:"+cateList);
     if(paras!=null && empty(paras.categoryDetails)){
        this.details(paras.id,true);
     }
     if(paras!=null){
        if(paras.categoryDetails.length > 1){
            this.list = paras.categoryDetails;
            this.diago = true;
        }else{
          this.details(paras.id,true);
        }
     }
     if(cateList!=null){
       this.diago2 = true;
       console.log(that);
       for (let i = 0; i < cateList.length; i++) {
         that.menuList[i] = cateList[i];
       }
       console.log("menuList:"+that.menuList);
     }
     
  },
  methods: {
      // details(id,length){
      //   this.$router.push(`/menudetail?id=${id}&length=${length}`)
      // },
      details(id){
        this.$http.get('/bot_menu/find-details/'+ id ).then( (response) => {
          this.menuDetail = response.data;
          if(response.data.type==0){
              window.location.href = response.data.link
          }
        })
      },
    back(){
      // 返回到上一级
      this.$router.go(-1);
      // this.$router.go(-1)
      // 可以指定跳转到某一个页面
      // this.$router.push('/movie')

      // replace替换当前页面
      // this.$router.replace('/')

    },

  },
};
</script>

<!-- <style lang="scss" scoped>  -->
<style lang="scss">
#app { background: #fff !important;}
.ques-box { display:inline-flex; justify-content: space-between; width: 1200px; margin: auto; padding-top: 44px;}
.notice{
   width: 250px;
   background: #eee;
   padding-top: 24px;
   position: relative;
   flex-shrink: 0;

   
}
.abs-right { width: 900px; line-height: 30px; font-size: 16px; color: #555;}
.notice-info{
  margin: 10px;
  cursor: pointer;

}
.notice-box {
  height: 100px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  box-sizing: border-box;
  text-align: left;
}
.top-banner-box {
  width: 100%;
  height: 400px;
}
.support-box {
  text-align: left;
  background: #fff;
  padding-top: 40px;
  .title-box {
    height: 100px;
    background-size: 100%;
    .title {
      height: 30px;
      font-size: 30px;
      line-height: 30px;
      color: #222221;
      padding-top: 35px;
    }
    .des {
      padding-top: 15px;
      height: 14px;
      font-size: 14px;
      line-height: 14px;
      color: #898989;
    }
  }
  #app{
    background:#ffffff!important;
  }
  .support-list-box {
    margin-top: 38px;
    .item-box {
      padding: 0 13px;
      width: 229px;
      height: 308px;
      .item-img {
        width: 44px;
        height: 45px;
        margin-top: 67px;
      }
      .item-title {
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        color: #222221;
        margin-top: 27px;
      }

      .item-des {
        margin-top: 20px;
        font-size: 14px;
        line-height: 24px;
        color: #5a5a5a;
      }
    }
    .left-red {
      background: red;
      .item-title {
        color: #fff;
      }
      .item-des {
        color: #fff;
      }
    }
  }
}
.solution-box {
  height: 700px;
  background: url("../assets/fubabceSupport/yuan-bg.jpg") no-repeat 0 0;
  padding-top: 66px;
  .solution-title {
    font-size: 36px;
    line-height: 36px;
    color: #ffffff;
  }
  .solution-text {
    margin-top: 40px;
    text-align: left;
    width: 1130px;
    font-size: 16px;
    line-height: 36px;
    color: #dadada;
    .hot {
      color: #f79c31;
    }
  }
  .solution-center-circle {
    width: 460px;
    height: 460px;
    margin-top: 46px;
  }
}

.step-outer-box {
  padding-top: 80px;
  background: #fff;
  .step-box {
    width: 100%;
    height: 370px;
    background: url("../assets/fubabceSupport/step-bg.png") no-repeat center;
  }
}

.user-info-box {
  padding-top: 50px;
  width: 100%;
  height: 280px;
  .user-box-title {
    margin-bottom: 46px;
    font-size: 30px;
    line-height: 30px;
    color: #292929;
  }
  .input300 {
    width: 300px;
    margin-right: 20px;
    height: 60px;
  }
  .input558 {
    width: 558px;
    height: 60px;
  }
  .sub-btn {
    margin: 36px;
    width: 300px;
    height: 60px;
    font-size: 18px;
  }
}
/*手机端*/
@media (min-width: 320px) and (max-width: 800px) {
  .ques-box {
    width: 100%; display: block;
    .notice { width: 100%;

    }
    .abs-right { width: 100%; padding: 10px; box-sizing: border-box;}
  }
}


</style>